<template>
  <el-dialog
    title="消息推送"
    :visible="visible"
    @close="handleClose"
    :close-on-click-modal="false"
  >
    <el-form
      class="small-space"
      :model="operationInfo"
      label-position="left"
      label-width="90px"
      ref="operationForm"
      :rules="rules"
    >
      <el-form-item
        label="推送说明"
        prop="desc"
      >
        <el-input
          v-model="operationInfo.desc"
          :disabled="formDisabled"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="推送目标"
        prop="receive_type"
      >
        <el-radio-group
          v-model="operationInfo.receive_type"
          @change="hanleReceiveTypeChange"
          :disabled="formDisabled"
        >
          <el-radio :label="0">所有用户</el-radio>
          <el-radio :label="2">包名渠道版本</el-radio>
          <el-radio :label="1">指定ID</el-radio>
          <el-radio :label="3">指定分组</el-radio>
        </el-radio-group>
      </el-form-item>
      <template v-if="operationInfo.receive_type == '2'">
        <el-form-item
          label="版本"
          prop="app_version"
        >
          <el-select
            v-model="operationInfo.app_version"
            :disabled="formDisabled"
          >
            <el-option
              v-for="item in versionOptions"
              :key="item.id"
              :label="item.text"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="渠道"
          prop="app_channel"
        >
          <el-select
            v-model="operationInfo.app_channel"
            :disabled="formDisabled"
          >
            <el-option
              v-for="item in channelOptions"
              :key="item.channel_id"
              :label="item.text"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="包名"
          prop="app_package_name"
          v-if="operationInfo.receive_type == '3'"
        >
          <el-select
            v-model="operationInfo.app_package_name"
            :disabled="formDisabled"
          >
            <el-option
              v-for="item in packageOptions"
              :key="item.id"
              :label="item.text"
              :value="item.text"
            ></el-option>
          </el-select>
        </el-form-item>
      </template>
      <el-form-item
        label="选择分组"
        prop="receive_group"
        v-if="operationInfo.receive_type=='3'"
      >
        <el-select v-model="operationInfo.receive_group">
          <el-option
            v-for="item in user_groups"
            :key="item.level_id"
            :label="item.level_name"
            :value="item.level_id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="ID(以,分隔)"
        prop="receive_value"
        v-if="operationInfo.receive_type == '1'"
        :disabled="formDisabled"
      >
        <el-input
          type="textarea"
          v-model="operationInfo.receive_value"
          :disabled="formDisabled"
        ></el-input>(最多200个)
      </el-form-item>
      <el-form-item
        label="推送时间"
        prop="push_time"
      >
        <el-date-picker
          v-model="operationInfo.push_time"
          type="datetime"
          placeholder="选择日期时间"
          :disabled="formDisabled"
        ></el-date-picker>
      </el-form-item>
      <el-form-item
        label="标题"
        prop="title"
      >
        <el-input
          type="text"
          v-model="operationInfo.title"
          maxlength="20"
          show-word-limit
          :disabled="formDisabled"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="内容"
        prop="content"
      >
        <el-input
          type="textarea"
          v-model="operationInfo.content"
          maxlength="30"
          show-word-limit
          :disabled="formDisabled"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="跳转"
        prop="type"
      >
        <el-radio-group
          v-model="operationInfo.type"
          :disabled="formDisabled"
        >
          <el-radio :label="2">首页</el-radio>
          <el-radio :label="1">外部跳转</el-radio>
          <el-radio :label="0">内部跳转</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="链接"
        prop="link"
        v-if="operationInfo.type !== 2"
      >
        <el-input
          type="text"
          v-model="operationInfo.link"
          :disabled="formDisabled"
        ></el-input>
      </el-form-item>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        type="primary"
        @click="handleCopy()"
        v-loading="saveLoading"
        v-if="formDisabled"
      >复制</el-button>
      <template v-if="!formDisabled">
        <el-button
          type="primary"
          @click="handleConfirm(0)"
          :loading="saveLoading"
        >保存</el-button>
        <el-button
          type="warning"
          @click="handleConfirm(1)"
          :loading="loading"
        >立即推送</el-button>
      </template>
    </div>
  </el-dialog>
</template>
<script>
import baseConfig from '@/config/baseConfig';
const defaultParams = { receive_type: 0, type: 2, title: baseConfig.consoleNameZh }
export default {
  props: ['visible', 'params', 'disabled'],
  data() {
    return {
      first_load: false,
      channelOptions: [],
      versionOptions: [],
      packageOptions: [],
      operationInfo: defaultParams,
      loading: false, //立即发送中
      saveLoading: false, //保存中
      formDisabled: false, //是否禁用表单
      user_groups: [],
    }
  },
  computed: {
    isCopy() {
      return this.disabled
    },
    rules() {
      return {
        title: [{ required: true, message: '不能为空', trigger: 'change' }],
        content: [{ required: true, message: '不能为空', trigger: 'change' }],
        desc: [{ required: true, message: '不能为空', trigger: 'change' }],
        link: [
          {
            required: this.operationInfo.type == '1' ? false : true,
            message: '不能为空',
            trigger: 'change'
          }
        ]
      }
    }
  },
  watch: {
    visible(val) {
      if (val && !this.first_load) {
        this.getAppInfo()
        this.first_load = true
      }
    },
    disabled(val) {
      this.formDisabled = val
    },
    params(val) {
      this.$nextTick(() => {
        this.$refs.operationForm && this.$refs.operationForm.clearValidate()
      })
      this.operationInfo = Object.assign({}, defaultParams, val)
    }
  },
  created() {
    this.getUserGroups()
  },
  methods: {
    getUserGroups() {
      this.$get('account/groupconfig').then(resp => {
        if (resp && resp.data) {
          this.user_groups = resp.data.items
        }
      })
    },
    hanleReceiveTypeChange(label) {
      if (label == '0' || label == '2') {
        delete this.operationInfo.app_version
        delete this.operationInfo.app_package_name
        delete this.operationInfo.app_channel
      }
      if (label == '0' || label == '1') {
        delete this.operationInfo.receive_value
      }
    },
    getAppInfo() {
      this.getConfigInfo().then(data => {
        this.channelOptions = data._channel
        this.versionOptions = data._version
        this.packageOptions = data._package
      })
    },
    handleClose() {
      this.$emit('close')
    },
    //保存或者发送
    handleConfirm(type) {
      let method =
        this.operationInfo.message_id && !this.isCopy ? '$put' : '$post'
      let url =
        this.operationInfo.message_id && !this.isCopy
          ? 'push_message/cfg/' + this.operationInfo.message_id
          : 'push_message/cfg'
      //如果是复制删除message_id参数
      if (this.isCopy) {
        delete this.operationInfo.message_id
      }
      if (type == 0) {
        this.rules['push_time'] = [
          { required: true, message: '不能为空', trigger: 'change' }
        ]
      }
      this.$refs.operationForm.validate(validate => {
        if (validate) {
          var params = Object.assign({}, this.operationInfo)
          if (type == 1) {
            delete params['push_time']
            this.loading = true
          } else {
            this.saveLoading = true
          }
          if (params['type'] == '1') {
            delete params['type']
          }
          this[method](url, params)
            .then(resp => {
              this.loading = false
              this.saveLoading = false
              this.$emit('confirm')
              this.$emit('close')
              this.$message.success('操作成功')
            })
            .catch(err => {
              this.loading = false
              this.saveLoading = false
              this.$message.error(err.data.error.description)
            })
        }
      })
    },
    //复制
    handleCopy() {
      this.formDisabled = false
    }
  }
}
</script>
<style lang="scss">
.el-button .el-loading-spinner {
  margin-top: -11px;
  .circular {
    width: 20px;
    height: 20px;
  }
}
</style>
